{% extends 'back/index.html' %}
{% block modal %}
    <div class="modal fade"  id="delwarningmodal">
        <div class="modal-dialog">
            <div class="modal-content">
                <input type="hidden" id="delid">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"><i class="iconfont icon-jinggao1"></i>警告</h4>
                </div>

                <div class="modal-body">
                    确定要删除此文章么（该操作不可恢复！）
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-info" onclick="del()">确定</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block content1 %}
    <!-- User Info, Notifications and Menu Bar -->
    <nav class="navbar user-info-navbar" role="navigation">

        <!-- Left links for user info navbar -->
        <ul class="user-info-menu left-links list-inline list-unstyled">

            <li class="hidden-sm hidden-xs">
                <a href="#" data-toggle="sidebar">
                    <i class="fa-bars"></i>
                </a>
            </li>

            <li class="dropdown hover-line">
                <a href="#" data-toggle="dropdown">
                    <i class="fa-table"></i>
                </a>

                <ul class="dropdown-menu notifications">
                    <li class="top">
                        <p class="small">请选择</p>
                    </li>

                    <li>
                        <ul class="dropdown-menu-list list-unstyled ps-scrollbar">
                            <li class="active notification-success">
                                <a href="{% url 'Content' %}?data=list">
                                    <i class="iconfont icon-duoyuanhuashidian"></i>
                                    <span class="line">
                                        <strong>内容列表</strong>
                                    </span>
                                    <span class="line small time">点击查看</span>
                                </a>
                            </li>
                            <li class="active notification-danger">
                                <a href="{% url 'Content' %}?data=add">
                                    <i class="iconfont icon-standard"></i>

                                    <span class="line">
                                        <strong>添加内容</strong>
                                    </span>
                                    <span class="line small time">点击查看</span>

                                </a>
                            </li>

                        </ul>
                    </li>

                </ul>
            </li>

        </ul>


        <!-- Right links for user info navbar -->
        <ul class="user-info-menu right-links list-inline list-unstyled">
            <li class="dropdown user-profile">
                <a href="#" data-toggle="dropdown">
                    <img src="/static/assets/images/user-4.png" alt="user-image" class="img-circle img-inline userpic-32" width="28" />
                    <span>
                        admin
                        <i class="fa-angle-down"></i>
                    </span>
                </a>

                <ul class="dropdown-menu user-profile-menu list-unstyled">
                    <li class="last">
                        <a href="{% url 'login' %}">
                            <i class="fa-lock"></i>
                            注销
                        </a>
                    </li>
                </ul>
            </li>

        </ul>
    </nav>
    {% block content %}

        <div class="page-title">
            <div class="title-env">
                <h1 class="title">内容列表</h1>
            </div>
            <div class="breadcrumb-env">
                <ol class="breadcrumb bc-1">
                    <li>
                        <a href={% url 'index' %}><i class="fa-home"></i>主页</a>
                    </li>
                    <li class="active">
                        <strong>内容列表</strong>
                    </li>
                </ol>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <button class="btn btn-success" onclick="location.href='{% url 'Content' %}?data=add'"><i class="iconfont icon-jia"></i>添加</button>
                    </div>
                    <div class="panel-body">
                        <script type="text/javascript">
                           jQuery(document).ready(function($)
                            {
                                $("#example-1").dataTable({
                                    aLengthMenu: [
                                        [10, 25, 50, 100, -1], [10, 25, 50, 100, "全部"]
                                    ],
                                    language:{
                                        "info": "显示_START_至_END_项结果，共_TOTAL_项",
                                        "search": "搜索:",
                                        "paginate": {"previous": "上一页", "next": "下一页"},
                                        "lengthMenu": "显示 _MENU_ 项",
                                        "zeroRecords": "抱歉，没有找到符合条件的记录"
                                    },
                                });
                                $("#example-1").wrapAll("<div style='overflow-x:scroll'>");
                            });
                        </script>

                        <table id="example-1" class="table table-striped table-bordered" cellspacing="0" width="100%" style="white-space: nowrap">
                        <thead>
                            <tr>
                                <th>名称</th>
                                <th>类型</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>

                        <tbody>
                            {% for record in content %}
                                <tr id={{ record.id }}>
                                    <td>{{ record.title }}</td>
                                    <th>{{ record.leibie }}</th>
                                    <th>{{ record.addTime|date:"Y-m-d" }}</th>
                                    <th>
                                        <button class="btn btn-blue btn-xs" onclick="detail(this)">详情</button>
                                        <button class="btn btn-red btn-xs" onclick="delwarn(this)">删除</button>
                                    </th>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    </div>
                </div>
            </div>
        </div>
    {% endblock %}
{% endblock %}

{% block css_js_part2 %}
    <!-- Imported styles on this page -->
    <link rel="stylesheet" href="/static/assets/js/datatables/dataTables.bootstrap.css">

    <!-- Bottom Scripts -->
    <script src="/static/assets/js/bootstrap.min.js"></script>
    <script src="/static/assets/js/TweenMax.min.js"></script>
    <script src="/static/assets/js/resizeable.js"></script>
    <script src="/static/assets/js/joinable.js"></script>
    <script src="/static/assets/js/xenon-api.js"></script>
    <script src="/static/assets/js/xenon-toggles.js"></script>
    <script src="/static/assets/js/datatables/js/jquery.dataTables.min.js"></script>


    <!-- Imported scripts on this page -->
    <script src="/static/assets/js/datatables/dataTables.bootstrap.js"></script>
    <script src="/static/assets/js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>
    <script src="/static/assets/js/datatables/tabletools/dataTables.tableTools.min.js"></script>


    <!-- JavaScripts initializations and stuff -->
    <script src="/static/assets/js/xenon-custom.js"></script>
    <script type="text/javascript">
        $("#content").addClass('active');
        function detail(aa) {
            var id = $(aa).parents('tr').attr('id');
            location.href='/Content?data=detail&id='+id;
        }
        function delwarn(aa){
            var id = $(aa).parents('tr').attr('id');
            $('#delid').val(id);
            $('#delwarningmodal').modal("show");
        }
        function del(){
            var id = $('#delid').val();
            $.ajax({
                url: '/Content/',
                type: 'POST',
                data: {'id': id,'data':"del"},
                dataType: 'json',
                timeout:10000,
                success:function (data) {
                    if(data == "success"){
                        $('#delwarningmodal').modal('hide');
                        document.getElementById(id).remove();
                    }else{
                        alert('删除未成功！')
                    }
                }
            })
        }
    </script>
{% endblock %}




